<template>
  <div id="index">
    <div class="app-container"
      id="container">

      <el-form ref="form"
        :model="form"
        :rules="rules"
        label-width="140px"
        label-position="right">
        <div class="product-div">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">基本信息</em>
          </div>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="项目名称"
                prop="itemName">
                {{ form.itemName }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="服务项目分类"
                prop="categoryUids"
                style="width: 100%;">
                {{ form.categoryUidsStr }}
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>
            <el-col :span="7">
              <el-form-item label="服务项目类别"
                prop="itemType"
                style="width: 100%;">
                <span>{{ form.itemTypeStr }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="菠萝派"
                prop="itemBoluoHuaPrice">
                <span>{{ form.itemBoluoHuaPriceStr }}个</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">分钟</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="面价"
                :required="true">

                <span>{{ form.itemPriceStr }}元</span>

              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="活动价格"
                prop="itemFavorablePrice">
                <span>{{ form.itemFavorablePriceStr }}元</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="美容师耗卡"
                :required="true">
                <span>{{ form.itemSettlementPriceStr }}元</span>

              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">元</div>
            </el-col>
          </el-row>

          <el-row :gutter="20">

            <el-col :span="7">
              <el-form-item label="是否是主项目"
                :required="true">

                <span>{{ form.isMaster == '1' ? '是' : '否' }}</span>

              </el-form-item>
            </el-col>

            <el-col :span="1">
              <div class="div-appendHide">个</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="门店销售分成"
                :required="true">

                <span>{{ form.itemSalePercent }}%</span>

              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">%</div>
            </el-col>

            <el-col :span="7">
              <el-form-item label="门店服务分成"
                :required="true">
                <span>{{ form.itemServicePercent }}%</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">%</div>
            </el-col>

          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="过期类型"
                prop="itemServiceDuration">
                <span>{{ form.expireDate ? form.expireDate:form.expireDay == -1  ? '长期有效':form.expireDay+'天' }}</span>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="7">
              <el-form-item label="单服务耗时"
                prop="itemServiceDuration">
                <span>{{ form.itemServiceDuration }}分钟</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">分钟</div>
            </el-col>
            <el-col :span="7">
              <el-form-item label="叠加服务时间"
                prop="itemComposeDuration">
                <span>{{ form.itemComposeDuration }}分钟</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">分钟</div>
            </el-col>

            <!-- <el-col :span="7">
              <el-form-item label="护理周期" prop="cycleDay">
                <span>{{ form.cycleDay }}天</span>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <div class="div-appendHide">天</div>
            </el-col> -->
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="适用门店">
                <!-- <el-checkbox-group v-model="form.serviceTypes" >
                  <el-checkbox label="Life">生美</el-checkbox>
                  <el-checkbox label="Medical">医美</el-checkbox>
                  <el-checkbox label="probxplus">菠萝家</el-checkbox>
                </el-checkbox-group> -->

                <el-checkbox-group v-model="form.serviceTypes"
                  disabled>
                  <el-checkbox :key="index"
                    v-for="(item, index) in serviceTypesList"
                    :label="item.dictValue">
                    {{ item.dictLabel }}</el-checkbox>
                </el-checkbox-group>

              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="选择">
                <el-checkbox-group v-model="form.checkList"
                  disabled>
                  <el-checkbox label="isCommon">指定门店</el-checkbox>
                  <el-checkbox label="isLockDevice">需要设备</el-checkbox>
                  <el-checkbox label="isSubgift">支持转赠</el-checkbox>
                  <el-checkbox label="isShow">前端展示</el-checkbox>

                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="门店列表"
            v-if="existValue('isCommon') > 0"
            :required="true">
            <selected ref="childStore"
              style="margin-top: 10px;"
              v-if="selectedDataStore.length > 0"
              :selectedData="selectedDataStore"
              :canDelete="false">
            </selected>
          </el-form-item>

          <el-form-item label="设备列表"
            v-if="existValue('isLockDevice') > 0"
            :required="true">
            <selectedDevice ref="childDevice"
              style="margin-top: 10px;"
              v-if="selectedDataDevice.length > 0"
              :selectedData="selectedDataDevice"
              :canDelete="false">
            </selectedDevice>
          </el-form-item>

          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="支付方式">
                <el-checkbox-group v-model="form.checkListPay"
                  disabled>
                  <el-checkbox label="isUseBoluoGoldCoin">菠萝金币</el-checkbox>
                  <el-checkbox label="isUseBoluoSilverCoin">菠萝银币</el-checkbox>
                  <el-checkbox label="isUseCoupon">优惠券</el-checkbox>
                  <el-checkbox label="isUseMemberDiscount">会员折扣</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="7">
              <el-form-item label="折扣等级"
                v-if="existValuePay('isUseMemberDiscount') > 0"
                :required="true">
                <el-select disabled
                  style="width: 100%;"
                  v-model="form.memberLevel"
                  placeholder="请选择等级"
                  clearable
                  size="small">
                  <el-option v-for="dict in levelOptions"
                    :key="dict.customerGrade"
                    :label="dict.levelName"
                    :value="dict.customerGrade" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="营销标签"
                prop="marketingTags"
                style="width: 100%;">
                {{ form.marketingTags }}
              </el-form-item>
            </el-col>

          </el-row>
          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="标签集合"
                prop="itemTags"
                style="width: 100%;">
                {{ form.itemTags }}
              </el-form-item>
            </el-col>

          </el-row>

          <el-row :gutter="20">
            <el-col :span="22">
              <el-form-item label="属性集合"
                prop="itemTags"
                style="width: 100%;">
                {{ form.itemAttributeArrayStr }}
              </el-form-item>
            </el-col>

          </el-row>
          <el-form-item label="项目主图"
            prop="itemMainImage">
            <el-image v-if="form.itemMainImage"
              :z-index="zIndex"
              :preview-src-list="[form.itemMainImage]"
              :src="form.itemMainImage"
              style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
          </el-form-item>
          <el-form-item label="项目背景图"
            prop="backgroundImage">
            <el-image v-if="form.backgroundImage"
              :z-index="zIndex"
              :preview-src-list="[form.backgroundImage]"
              :src="form.backgroundImage"
              style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
          </el-form-item>
          <el-form-item label="项目轮播图"
            prop="itemBannerStr">
            <el-image :z-index="zIndex"
              :preview-src-list="form.itemBannerStr"
              v-for="(imgmi, index) in form.itemBannerStr"
              :src="form.itemBannerStr[index]"
              :key="index"
              style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
            <!-- <el-image v-if="form.itemMainImage" :z-index="zIndex" :preview-src-list="[form.itemMainImage]"
              :src="form.itemBanner" style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image> -->
          </el-form-item>

          <!-- <el-form-item label="项目icon" prop="itemIcon">
            <el-image v-if="form.itemIcon != null && form.itemIcon != ''" :z-index="zIndex"
              :preview-src-list="[form.itemIcon]" :src="form.itemIcon" style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
          </el-form-item> -->

          <el-row :gutter="24">
            <el-col :span="22">
              <el-form-item label="项目文字描述"
                prop="itemDescText">
                {{ form.itemDescText }}
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="项目图片"
            prop="itemDescImage">
            <el-image :z-index="zIndex"
              v-if="form.itemDescImage!=''"
              :preview-src-list="form.itemDescImageStr"
              v-for="(imgmi, index) in form.itemDescImageStr"
              :src="imgmi"
              :key="index"
              style="
                      width: 80px;
                      height: 80px;
                      margin-left: 10px;
                      margin-top: 10px;
                      border: 1px solid #ebebeb;
                      border-radius: 6px;
                    ">
            </el-image>
          </el-form-item>

          <el-row :gutter="24">
            <el-col :span="22">
              <el-form-item label="特别提示"
                prop="itemTips">
                {{ form.itemTips }}
              </el-form-item>
            </el-col>
          </el-row>

        </div>

        <div class="product-div-two">
          <div class="product-header">
            <em style="font-size: 18px;font-style: normal;"
              class="big_title_style">sku价格</em>
          </div>
          <div style="width: 1200px;padding: 10px 10px 20px 100px;">

            <el-table :data="form.proboxServiceItemSkus"
              border>

              <el-table-column prop="skuName"
                align="center"
                label="sku名称">

              </el-table-column>
              <el-table-column prop="itemPriceFmt"
                align="center"
                label="面价">

              </el-table-column>
              <el-table-column prop="itemFavorablePriceFmt"
                align="center"
                label="活动价格">

              </el-table-column>
              <el-table-column prop="isSupportCoupon"
                align="center"
                label="支持优惠券">
                <template slot-scope="scope">
                  <span>{{scope.row.isSupportCoupon == '1'? '是': '否'}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="itemSettlementPriceStr"
                align="center"
                label="美容师耗卡">

              </el-table-column>
              <el-table-column prop="itemBoluoHuaPrice"
                align="center"
                label="菠萝派">

              </el-table-column>
              <el-table-column prop="itemServiceDuration"
                align="center"
                label="服务时长(分钟)"
                width="120px">

              </el-table-column>
              <el-table-column prop="serviceTimes"
                align="center"
                label="服务次数"
                width="100px">

              </el-table-column>

            </el-table>
          </div>

        </div>

      </el-form>
      <div class="dw">
        <el-button @click="colsePro"
          style="margin-top: 10px;margin-left: 40%;">返回</el-button>
      </div>
    </div>

  </div>
</template>

<script>
import {
  checkPermi,
  checkRole
}
  from "@/utils/permission"; // 权限判断函数
import {
  selectOptions
}
  from "@/api/service/serviceCategory";

import imageArraySize from "@/components/ImageUpload/imageArraySize";
import videoUpload from "@/components/ImageUpload/videoUpload";
import sku from "@/components/sku/index"
import {
  getItem, addItem, editeItem, delSku
}
  from '@/api/service/item'

import selected from "@/components/Activity/SelectedStore";
import commodityStore from "@/components/Activity/commodityStore";

import selectedDevice from "@/components/Activity/SelectedDevice";
import commodityDevice from "@/components/Activity/commodityDevice";

export default {
  components: {
    imageArraySize,
    videoUpload,
    sku, selected,
    commodityStore, commodityDevice, selectedDevice
  },
  data () {
    return {
      zIndex: 2000,
      itemUid: this.$route.params.itemId,
      storeOpen: false,
      serviceTypesList: [],
      selectedDataStore: [],
      deviceOpen: false,
      selectedDataDevice: [],
      indexs: 0,
      inputVisible: false,
      inputValue: '',
      roles: 0,
      roleRule: 0,
      // th 值；动态控制 th 标题、批量设置
      //规格名称和的值, 组件里面可以添加规格名称和值
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 商品类别
      categoryOptions: [],
      itemTypeOptions: [],

      // 更多的下拉
      displayBool: 0,
      // 查询参数
      queryParams: {},
      columns: [],
      // 表单参数
      form: {
        isCommon: '1',
        isLockDevice: '0',
        isUseBoluoGoldCoin: '0',
        isUseBoluoSilverCoin: '0',
        isUseCoupon: '0',
        isRecommend: '0',
        itemTagsArray: [],
        proboxServiceItemSkus: [],
        itemPriceStr: '0',
        itemFavorablePriceStr: '0',
        itemSettlementPriceStr: '0',
        itemBoluoHuaPriceStr: '0',
        checkListPay: [],
      },
      property: [],
      propertyUid: [],
      // 表单校验
      rules: {
        itemName: [{
          required: true,
          message: "项目名称不能为空",
          trigger: "blur"
        }],
        categoryUids: [{
          required: true,
          message: "项目分类不能为空",
          trigger: "blur"
        }],
        itemType: [{
          required: true,
          message: "项目类别不能为空",
          trigger: "blur"
        }],
        itemServiceDuration: [{
          required: true,
          message: "单服务耗时不能为空",
          trigger: "blur"
        }],
        itemComposeDuration: [{
          required: true,
          message: "组合服务耗时不能为空",
          trigger: "blur"
        }],
      },
      datas: [],
      tables: [],
      notNor: 0, //第一次不发生变化
    };
  },
  created () {
    let $this = this
    $this.bulidSelect();
    this.getDicts("item_apply_store_type").then(response => {
      this.serviceTypesList = response.data;
    });
    const itemId = $this.$route.params && $this.$route.params.itemId;

    if (itemId) {
      getItem(itemId).then(response => {
        let obj = JSON.parse(JSON.stringify(response.data));
        this.form = obj
        console.log(this.form)
        this.selectedDataStore = obj.releaseList || []
        this.selectedDataDevice = obj.deviceList || []
        // this.form.checkList = [];
        // this.form.serviceTypes = []
        this.$set(this.form, 'checkList', [])
        this.$set(this.form, 'checkListPay', [])
        this.$set(this.form, 'serviceTypes', [])
        if (this.form.isCommon == '0') {
          this.form.checkList.push('isCommon');
        }
        if (this.form.isLockDevice == '1') {
          this.form.checkList.push('isLockDevice');
        }
        if (this.form.isSubgift == '1') {
          this.form.checkList.push('isSubgift');
        }
        if (this.form.isShow == '1') {
          this.form.checkList.push('isShow');
        }
        if (this.form.isRecommend == '1') {
          this.form.checkList.push('isRecommend');
        }

        if (this.form.isUseCoupon == '1') {
          this.form.checkListPay.push('isUseCoupon');
        }
        if (this.form.isUseMemberDiscount == '1') {
          this.form.checkListPay.push('isUseMemberDiscount');
        }
        if (this.form.isUseBoluoGoldCoin == '1') {
          this.form.checkListPay.push('isUseBoluoGoldCoin');
        }
        if (this.form.isUseBoluoSilverCoin == '1') {
          this.form.checkListPay.push('isUseBoluoSilverCoin');
        }
        if (this.form.applyStoreType) {
          this.form.serviceTypes = this.form.applyStoreType.split(",")
        }
        this.displayBool = 1;

        let attArr = "";
        this.form.itemAttributeArrays.forEach(vo => {
          attArr += "," + vo.attributeName
        })
        attArr = attArr.substring(1, attArr.length)
        this.form.itemAttributeArrayStr = attArr;
        selectOptions().then(response => {
          this.categoryOptions = response.data;
          if ($this.form.categoryUids) {
            let str = "";
            this.categoryOptions.forEach(vo => {

              if (vo.value == $this.form.categoryUids[0]) {
                str = vo.label;
                if ($this.form.categoryUids.length > 1 && vo.children) {
                  vo.children.forEach(it => {
                    if (it.value == $this.form.categoryUids[1]) {
                      str = str + "-" + it.label
                    }
                  })
                }
              }
            })
            this.$set(this.form, 'categoryUidsStr', '')
            $this.form.categoryUidsStr = str;
          }
        });
      });
    }

  },

  methods: {
    checkPermi,
    checkRole,
    existValue (type) {
      let index = 0;
      if (this.form.checkList) {
        this.form.checkList.forEach(elemet => {
          if (elemet == type) {
            index++;
          }
        })
      }

      return index;
    },
    existValuePay (type) {
      let index = 0;
      if (this.form.checkListPay) {
        this.form.checkListPay.forEach(elemet => {
          if (elemet == type) {
            index++;
          }
        })
      }

      return index;
    },
    selectCommodityDevice () {
      this.$forceUpdate()
      this.deviceOpen = true;
      this.$nextTick(() => {
        this.$refs["selTableDevice"].greet(this.selectedDataDevice);
      });
    },
    selectCommodity () {
      this.$forceUpdate()
      this.storeOpen = true;
      this.$nextTick(() => {
        this.$refs["selTable"].greet(this.selectedDataStore);
      });
    },
    multipleSelectionDevice (data) {
      this.deviceOpen = false
      this.selectedDataDevice = data;
      this.$nextTick(() => {
        //this.$refs.childDevice.getList();
      });
    },
    multipleSelection (data) {
      this.storeOpen = false
      this.selectedDataStore = data;
      this.$nextTick(() => {
        ///this.$refs.childStore.getList();
      });
    },
    toCloseDeviceBox () {
      this.deviceOpen = false;
    },
    toCloseBox () {
      this.storeOpen = false;
    },
    indexMethod (index) {
      this.indexs = index
      return index * 1;
    },
    handleDelete (row, index) {
      console.log(index)
      if (row.skuId) {
        delSku(row.skuId).then(response => {
          this.form.proboxServiceItemSkus.splice(index, 1);

        })
      } else {
        this.form.proboxServiceItemSkus.splice(index, 1);

      }
    },
    handleAdd () {
      let data = {
        no: JSON.parse(JSON.stringify(this.indexs)),
        skuId: null,
        skuName: null,
        serviceItemId: null,
        itemPrice: 0,
        itemFavorablePrice: 0,
        itemSettlementPrice: 0,
        itemBoluoHuaPrice: 0,
        itemServiceDuration: 0,
        serviceTimes: 1,
      }
      this.form.proboxServiceItemSkus.push(data);
      console.log(this.form.proboxServiceItemSkus)
    },


    oninput (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位
        if (str.indexOf(".") == str.length - 1) {
          str = str.substring(0, str.length - 1);
        }
      }
      return str
    },
    oninputs (num, limit) {

      var str = num
      var len1 = str.substr(0, 1)
      var len2 = str.substr(1, 1)
      if (str.length > 1 && len1 == 0 && len2 != ".") {
        str = str.substr(1, 1)
      }
      if (len1 == ".") {
        str = ""
      }
      if (str.indexOf(".") != -1) {
        var str_ = str.substr(str.indexOf(".") + 1)
        if (str_.indexOf(".") != -1) {
          str = str.substr(0, str.indexOf(".") + str_.indexOf(".") + 1)
        }
      }
      //正则替换
      str = str.replace(/[^\d^\.]+/g, '') // 保留数字和小数点
      if (limit / 1 === 1) {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,1})?.*$/, '$1') // 小数点后只能输 1 位
      } else {
        str = str.replace(/^\D*([0-9]\d*\.?\d{0,2})?.*$/, '$1') // 小数点后只能输 2 位

      }
      return str
    },
    // 表单重置
    reset () {
      this.form = {};
      this.resetForm("form");
    },
    divShow (obj) {
      this.displayBool = obj;
    },
    /**各种下拉框 */
    bulidSelect () {
      // 分类
      // selectOptions().then(response => {
      //   this.categoryOptions = response.data;
      // });
      this.getDicts("proBoxService_itemType").then(response => {
        this.itemTypeOptions = response.data;
      });
    },
    /** 提交按钮 */
    submitForm (status) {
      console.log(this.form)

      this.$refs.child.selectImg();
      this.$refs.childs.selectImg();
      this.$refs.childss.selectImg();
      this.$refs.childsss.selectImg();
      // if (this.form.itemMainImage == null || this.form.itemMainImage == "") {
      //   this.$message.error("请上传一张项目主图");
      //   return;
      // }
      // if (this.form.itemBanner == null || this.form.itemBanner == "") {
      //   this.$message.error("请上传一张banner图片");
      //   return;
      // }
      this.$refs["form"].validate(valid => {

        if (valid) {
          let qf = [];
          this.selectedDataStore.forEach(vo => {
            qf.push(vo.storeUid);
          })
          let qfDevice = [];
          this.selectedDataDevice.forEach(vo => {
            qfDevice.push(vo.deviceId);
          })
          this.form.deviceIdS = qfDevice;
          this.form.shopListIds = qf;

          const itemId = this.$route.params && this.$route.params.itemId;
          this.form.itemId = itemId;
          this.form.itemPriceView = this.form.itemPriceStr
          this.form.itemFavorablePriceView = this.form.itemFavorablePriceStr
          this.form.itemSettlementPriceView = this.form.itemSettlementPriceStr
          this.form.itemBoluoHuaPriceView = this.form.itemBoluoHuaPriceStr

          this.form.auditStatus = status;
          if (itemId) {


            editeItem(this.form).then(respone => {
              this.msgSuccess("修改成功");
              this.colsePro();
            })
          } else {
            addItem(this.form).then(respone => {
              this.msgSuccess("添加成功");
              this.colsePro();
            })
          }
        }
      });
    },
    colsePro () {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push({
        path: "/product/item",
        query: {
          t: Date.now()
        }
      });
    },
    handleClose (tag) {
      this.form.itemTagsArray.splice(this.form.itemTagsArray.indexOf(tag), 1);
    },

    showInput () {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm () {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.form.itemTagsArray.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    }
  }
};
</script>
<style scoped>
#container {
  width: 100%;
  height: 50%;
}

#photo {
  float: left;
  width: 70%;
}

#content {
  float: right;
  width: 30%;
}

.product-header {
  position: absolute;
  top: 0;
  width: 600px;
  padding: 18px;
  background-color: #fff;
  -moz-border-radius: 4px;
  border-radius: 4px;
  height: 40px;
}

.product-div {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 50px;
}

.product-div-two {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 60px;
}

.product-div-three {
  background-color: #fff;
  position: relative;
  padding-right: 16px;
  padding-top: 54px;
  border: 1px solid #ebebeb;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width: 1200px;
  margin: auto;
  top: 20px;
  bottom: -20px;
  margin-bottom: 100px;
}

.place-font {
  color: #999;
  font-size: 13px;
  position: relative;
}

.dw {
  border: 1px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 200;
  padding-left: 120px;
  background-color: #fff;
  border-top: 1px solid #eee;
  width: 100%;
  height: 55px;
}

.div-img {
  display: none;
}

.div-text {
  margin: 22px 0px 12px 120px;
  color: #2656bd;
  cursor: pointer;
  font-size: 13px;
}

.div-append {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
}

.div-appendHide {
  line-height: 34px;
  font-size: 14px;
  color: #606266;
  margin-left: -50%;
  visibility: hidden;
}
</style >
